<template>
    <baseCard title="云资源使用明细" :height="height" v-if="showModal">
      <!-- <template #right>
        <VptSelectBlock
          :defaultSelect="defaultTabs"
          :tabList="tabOption"
          @changeTab="changeTab"
          :fontSize="'0.14rem'"
          :height="'0.24rem'"
        ></VptSelectBlock>
      </template> -->
      <arco-table
        :columns="columns"
        :data="tableData"
        :pagination="false"
        :scrollbar="true"
        :scroll="scroll"
        :rowClass="rowClassName"
        :hoverable="true"
      >
      <template #app_name="{ record }">
          {{ record.app_name }}
        </template>
        <template #app_num="{ record }">
          {{ record.app_num }}
        </template>
        <template #vcpu_total="{ record }">
          {{  addThousandsSeparator(record.vcpu_total) }}
        </template>
        <template #cpu_usage="{ record }">
          {{ record.cpu_usage }}%
        </template>
        <template #memory_available="{ record }">
          {{  addThousandsSeparator(record.memory_available) }}
        </template>
        <template #memory_usage="{ record }">
          {{ record.memory_usage }}%
        </template>
        <template #disk_total="{ record }">
          {{  addThousandsSeparator(record.disk_total) }}
        </template>
        <template #disk_used_percent="{ record }">
          {{ record.disk_used_percent }}%
        </template>
      </arco-table>
      <!-- <vptBaseTable1001
        :columns="columns"
        :dataList="tableData"
        :showPagination="false"
        :scrollbar="true"
        :scroll="scroll"
      > -->
      <!-- <template #cluster_name="{ rowIndex }">
          <div class="cell-content">
            <span>{{ rowIndex }}1111</span>
          </div>
        </template> -->
      <!-- </vptBaseTable1001> -->
    </baseCard>
  </template>
  
  <script setup>
  import { ref, reactive  ,onMounted} from "vue";
  import baseCard from "@/components/vpt-cards-1001/index.vue";
  import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";
  import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";
  import vptPalnTag from "@/components/vpt-base-tag";
  import { addThousandsSeparator } from "@/utils/formatter.js";
  import {
    getAppListData
  } from "@/api/mockApi/application.js";
  const props = defineProps({
    height: { type: String, default: "" },
    defaultTabs: { type: String, default: "" },
    chartType: { type: String, default: "init" },
  });
  const tableData = ref([]);
  onMounted(() => {
    getAppList();
  });
  const defaultTabs = ref("0");
  
  const getAppList = (
    params = {
      process_status: defaultTabs.value,
    }
  ) => {
    getAppListData(params).then((res) => {
      // tableData.value = res.data;
      tableData.value =[{"app_name":"大数据服务","disk_total":4576,"vcpu_total":80,"memory_usage":70.88,"disk_used_percent":2.83,"app_num":9,"memory_available":167.76,"cpu_usage":0.73},{"app_name":"项目库管理","disk_total":3000,"vcpu_total":160,"memory_usage":45.75,"disk_used_percent":10.63,"app_num":10,"memory_available":173.61,"cpu_usage":1.25},{"app_name":"技术中台","disk_total":22520,"vcpu_total":1104,"memory_usage":33.88,"disk_used_percent":29.48,"app_num":94,"memory_available":1692.74,"cpu_usage":3.15},{"app_name":"凭证库","disk_total":14600,"vcpu_total":624,"memory_usage":5.13,"disk_used_percent":8.62,"app_num":39,"memory_available":1183.96,"cpu_usage":1.07},{"app_name":"惠农惠民补贴一卡通","disk_total":2600,"vcpu_total":128,"memory_usage":28.18,"disk_used_percent":7.25,"app_num":8,"memory_available":206.84,"cpu_usage":1.25},{"app_name":"预算编制","disk_total":6400,"vcpu_total":320,"memory_usage":6.72,"disk_used_percent":9.98,"app_num":20,"memory_available":656.73,"cpu_usage":0.96},{"app_name":"低代码开发平台","disk_total":2920,"vcpu_total":160,"memory_usage":7.77,"disk_used_percent":23.98,"app_num":14,"memory_available":413.19,"cpu_usage":1.68},{"app_name":"开发过程管控平台","disk_total":1064,"vcpu_total":8,"memory_usage":76.52,"disk_used_percent":82.88,"app_num":1,"memory_available":3.76,"cpu_usage":0.74},{"app_name":"预决算、财报","disk_total":3200,"vcpu_total":160,"memory_usage":24.59,"disk_used_percent":10.06,"app_num":10,"memory_available":265.44,"cpu_usage":2.62},{"app_name":"预算执行","disk_total":2400,"vcpu_total":48,"memory_usage":4.51,"disk_used_percent":3.94,"app_num":3,"memory_available":91.67,"cpu_usage":1.13},{"app_name":"社会保障资金管理","disk_total":300,"vcpu_total":16,"memory_usage":6.52,"disk_used_percent":10.78,"app_num":1,"memory_available":29.91,"cpu_usage":0.92},{"app_name":"智能运维","disk_total":9746,"vcpu_total":176,"memory_usage":51.37,"disk_used_percent":5.43,"app_num":28,"memory_available":221.75,"cpu_usage":1.01},{"app_name":"政府采购","disk_total":1200,"vcpu_total":64,"memory_usage":8.17,"disk_used_percent":10.50,"app_num":4,"memory_available":117.55,"cpu_usage":1.10},{"app_name":"预算一体化","disk_total":39700,"vcpu_total":2052,"memory_usage":9.49,"disk_used_percent":10.47,"app_num":129,"memory_available":3779.70,"cpu_usage":1.25},{"app_name":"资产管理","disk_total":3230,"vcpu_total":272,"memory_usage":15.00,"disk_used_percent":16.16,"app_num":17,"memory_available":462.37,"cpu_usage":1.07},{"app_name":"基础信息管理","disk_total":3500,"vcpu_total":176,"memory_usage":12.90,"disk_used_percent":10.12,"app_num":11,"memory_available":334.45,"cpu_usage":0.97}]
    });
  };
  const tabOption = [
    { id: "0", name: "全部" },
    { id: "1", name: "告警" },
    { id: "2", name: "提示" },
    { id: "3", name: "正常" },
  ];
  
  const changeTab = (value) => {
    emit("changeTab", value.id);
  };
  
  const scroll = {
    y: "100%",
  };
  
  let columns = reactive([
    {
      title: "应用名称",
      slotName: "app_name",
      align: "left",
      width: 180,
    },
   
    {
      title: "主机数",
      slotName: "app_num",
      align: "center",
      width: 70,
    },
    {
      title: "CPU(核)",
      slotName: "vcpu_total",
      align: "center",
      width: 70,
    },
    {
      title: "CPU使用率",
      slotName: "cpu_usage",
      align: "center",
      width: 70,
    },
    {
      title: "内存(GB)",
      slotName: "memory_available",
      align: "center",
      width: 100,
    },
    {
      title: "内存使用率",
      slotName: "memory_usage",
      align: "center",
      width: 155,
    },
    {
      title: "存储(GB)",
      slotName: "disk_total",
      align: "center",
      width: 80,
    },
    {
      title: "存储使用率",
      slotName: "disk_used_percent",
      align: "center",
      width: 80,
    },
  ]);
  
  const rowClassName = (record, index) => {
    if (record.process_status == 2) {
      return "row-warn-status";
    } else if (record.process_status == 1) {
      return "row-danger-status";
    }
    return "";
  };
  
  const getCellValue = (value) => {
    var parts = value.split("/");
    parts = parts.map(function (item) {
      return addThousandsSeparator(item);
    });
    return parts.join("/");
  };
  
  const emit = defineEmits(["changeTab"]);
  </script>
  
  <style lang="less" scoped>
  @import url("../../../../assets/style/table.less");
  
  :deep(.seamless-scroll) {
    flex: 1;
    overflow: hidden;
  
    .arco-table-container {
      border-top: 1px solid transparent !important;
      border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
    }
  }
  
  .auto-scroll-box {
    display: flex;
    flex-direction: column;
    height: 100%;
  
    .vpt-table-header {
      :deep(.arco-table-tfoot) {
        box-shadow: none;
      }
  
      :deep(.arco-table-body) {
        display: none;
      }
    }
  
    .vpt-table-wrapper {
      :deep(.arco-table-header) {
        display: none;
      }
    }
  }
  
  .name-text {
    display: block;
    width: 1.4rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .zmbug .vpt-em-red {
    // color: #f53f3f !important;
  }
  
  // .yzbug .vpt-em-organge {
  //   color: #ff7d00 !important;
  // }
  
  .ybbug .vpt-em-organge {
    color: #ffc400 !important;
  }
  
  .ybbug .vpt-em-organge {
    color: #ffc400 !important;
  }
  
  :deep(
      .arco-table-hover:not(.arco-table-dragging)
        .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
    ) {
    background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
    background-size: 100% 98% !important;
  }
  
  :deep(.arco-table-td) {
    background: none !important;
  }
  </style>